<%@page import="java.net.URLEncoder"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Game is Created</title>
<link href="index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function insertQrCode(hint, description, coordinate, address) {
	parentDiv = document.getElementById('qr_codes');
	var newDiv = document.createElement('div');
	
	// Here instead of the former API that is commented, I've used the second API because
	// the latter provides us to remove white borders around QR codes
	//newDiv.innerHTML = '<div class="qr_box"><div class="qr_generate">description:' + description + '</div><img src="https://chart.googleapis.com/chart?chs=300x300&cht=qr&chl=' + hint + '"></div>';
	newDiv.innerHTML = '<div class="qr_box"><div class="qr_generate">description:' + description + '</div><img src="http://chart.apis.google.com/chart?cht=qr&chs=300x300&chl=' + hint + '&chld=H|0"></div>';
		
	parentDiv.appendChild(newDiv);
}

function printQRCodes() 
{
    var mywindow = window.open();
    var DocumentContainer = document.getElementById('qr_codes');
    
	mywindow.document.write('<html><head><title>Print QR Codes</title>');
	mywindow.document.write('<link href="index.css" rel="stylesheet" type="text/css" /></head>');
	mywindow.document.write('<div id="print-media"> <div id="qr_codes">');
	mywindow.document.write(DocumentContainer.innerHTML);
	mywindow.document.write('</div> </div> </html>');
	mywindow.document.close();
    mywindow.focus();
    mywindow.print();
    mywindow.close();
    return true;
}
</script>
</head>

<%@ include file="header.jsp" %>

<body>
<%
	String gameId = (String)request.getAttribute("game_id");
%>
<div class="information-text">
	<table align="center">
		<tr>
			<td><a href="./ViewTheGame.jsp?game_id=<%=gameId%>"> Click to View Game Information </a></td>
		</tr>
		<tr>
			<td><h1>Game is Created!</h1></td>
		</tr>
	</table>
</div>


<div class="created-page">
<form>
	<div id="qr_codes">
		<%
			String[] hintDescriptions = (String[]) request.getAttribute("hint_descriptions");
		   	String[] hintKeywords = (String[]) request.getAttribute("hint_keywords");
		   	String[] hintCoordinates = (String[]) request.getAttribute("hint_coordinates");
		   	String[] hintAddresses = (String[]) request.getAttribute("hint_addresses");
		   	int levelCount = hintDescriptions.length;
		%>
		<%
		   	for (int i = 0; i < levelCount; ++i) {%>
			<div class="created-level">Level <%=i+1 %></div>
			<%
				String url = request.getScheme() + "://" + request.getServerName() +":" +  request.getServerPort() + request.getContextPath();
				String hintString = hintKeywords[i] + System.getProperty("line.separator") + url + "/PlayGame.jsp?game_id=" + gameId + "&keyword=" + hintKeywords[i];
				System.out.println("\n\n" + hintString + "\n\n");
				String encodedHint = URLEncoder.encode(hintString, "UTF-8");
				 
			%>
			<script type="text/javascript">insertQrCode('<%=encodedHint%>', '<%=hintDescriptions[i]%>', '<%=hintCoordinates[i]%>', '<%=hintAddresses[i]%>');</script>
	   <%
	   		}
	   %>
	</div>
	<input type="button" id="print-button" value="Print Codes" onclick="printQRCodes();" />
</form>
</div>

<div style="clear: both;">&nbsp;</div>

</body>
<%@ include file="footer.jsp"%>